<template>
  <div class="orders">
    <h1>订单查询</h1>

    <!-- 显示加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 查询订单表格 -->
    <table v-if="!loading && orders.length > 0" class="orders-table">
      <thead>
      <tr>
        <th>订单编号</th>
        <th>顾客 ID</th>
        <th>订单状态</th>
        <th>总金额</th>
        <th>支付状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="order in orders" :key="order.id">
        <td>{{ order.orderNumber }}</td>
        <td>{{ order.userId }}</td>
        <td>{{ order.status }}</td>
        <td>\${{ order.totalAmount.toFixed(2) }}</td>
        <td>{{ order.paymentStatus }}</td>
        <td>
          <button @click="viewOrderDetails(order.orderNumber)">查看详情</button>
        </td>
      </tr>
      </tbody>
    </table>

    <!-- 没有订单的提示 -->
    <p v-else-if="!loading && orders.length === 0">
      暂无订单信息
    </p>
  </div>
</template>

<script>
import axiosInstance from '../utils/axios.js'; // 引入配置好的 axios 实例

export default {
  data() {
    return {
      orders: [], // 存储订单数组
      message: '', // 存储返回的信息
      loading: true, // 用于显示加载状态
    };
  },
  mounted() {
    this.fetchOrders(); // 获取订单数据
  },
  methods: {
    // 获取订单数据
    async fetchOrders() {
      try {
        const response = await axiosInstance.get('/orders'); // 使用配置好的 axios 实例发送请求
        console.log(response);  // 打印响应数据来查看返回的数据格式
        if (response.data && response.data.data) {
          this.orders = response.data.data; // 假设返回的是一个订单数组
          this.message = ''; // 清空之前的错误信息
        } else {
          this.message = '未找到相关订单数据';
        }
        this.loading = false;
      } catch (error) {
        console.error('请求失败:', error);
        // 将错误信息传递到错误页面组件
        const errorMessage = error.response ? error.response.data.message : '网络错误，请稍后再试';
        console.error(errorMessage);
        const errorCode = error.response ? error.response.data.code : 500;  // 默认是 500
        console.error(errorCode);
        this.$router.push({ name: 'ErrorPage', query: {
            message: errorMessage,
            statusCode: errorCode  // 传递状态码
        }
        });
        this.loading = false;
      }
    },

    // 查看订单详情
    viewOrderDetails(orderNumber) {
      console.log('查看订单详情:', orderNumber);
      // 跳转到订单详情页面，传递订单 ID
      this.$router.push({ name: 'OrderDetails', params: { orderNumber } });
    }
  }
};
</script>

<style scoped>
/* 样式：调整表格的外观和加载状态 */
.orders {
  padding: 20px;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th, .orders-table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

.orders-table th {
  background-color: #f4f6f9;
}

button {
  background-color: #3498db;
  color: white;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #2980b9;
}

.loading {
  text-align: center;
  font-size: 1.2rem;
  color: #3498db;
}

p {
  text-align: center;
  color: #ff5733;
  font-size: 1rem;
}
</style>
